<template>
  <div class="statistics-container">
    <div class="statistics-container__header">
      <div class="statistics-container__title">
        {{title}}
      </div>

      <div class="statistics-container__more" v-if="more">
        <router-link :to="{name: 'home'}">
          <el-button size="small" @click="$emit('open-detail')">更多 ></el-button>
        </router-link>
      </div>
    </div>

    <div class="statistics-container__main">
      <div class="statistics-container__title-nav" v-if="showNav">
        <div class="statistics-container__title-tab">
          {{type === 2 ? '本月' : '本日'}}
        </div>
        <div class="statistics-container__title-tab">
          {{type === 2 ? '上月' : '昨日'}}
        </div>
      </div>
      <capital-statistics
        class="statistics-container__capital-statistics"
        :title="title"
        :type="type"
        :isNewReg="isNewReg"
        :nav="nav"
        :api="api"
      ></capital-statistics>
    </div>
  </div>
</template>

<script>
 import CapitalStatistics from "./capital-statistics";

  export default {
    name: "statistics-container",

    components: {
      CapitalStatistics
    },

    props: ['title', 'type', 'isNewReg', 'nav', 'api', 'to', 'showNav', 'more'],

  }
</script>

<style lang="scss" scoped>
  $--nav-height: 160px !default;

  @include b(statistics-container) {
    flex: 0 0 50%;
    box-sizing: border-box;
    margin-right: 20px;

    &:last-of-type {
      margin-right: 0;
    }

    @include e(header) {
      display: flex;
    }

    @include e(title) {
      flex: 1 0 0;
      font-size:24px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    @include e(main) {
      display: flex;
    }

    @include e(capital-statistics) {
      flex: 1 0 0;
    }

    @include e(title-nav) {
      display: flex;
      flex-flow: column;
      width: 70px;
      height: 160px;
      padding-top: 70px;
    }
    @include e(title-tab) {
      font-size: $--font-size-small;
      font-weight: bold;
      margin-bottom: 32px;
    }

  }
</style>